---
import { getCollection } from 'astro:content'

import { SEO_DESCRIPTION_BLOG, SEO_TITLE_BLOG } from '../../consts'

import BaseLayout from '../../layouts/BaseLayout.astro'
import FormattedDate from '../../components/FormattedDate.astro'
import Hero from '../../components/Hero.astro'

const posts = (await getCollection('blog'))
  .map(({ data }) => data)
  .sort((a, b) => b.updatedDate.valueOf() - a.updatedDate.valueOf())
---

<BaseLayout description={SEO_DESCRIPTION_BLOG} title={SEO_TITLE_BLOG}>
  <script
    slot="head"
    type="application/ld+json"
    set:html={JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'Blog',
      name: SEO_TITLE_BLOG,
      description: SEO_DESCRIPTION_BLOG,
      url: `${Astro.site}/blog`,
      blogPost: posts.map(({ description, pubDate, slug, title, updatedDate }) => ({
        '@type': 'BlogPosting',
        headline: title,
        url: `${Astro.site}/blog/${slug}`,
        datePublished: pubDate,
        dateModified: updatedDate,
        description: description,
        author: {
          '@type': 'Person',
          name: 'HyperUI',
        },
      })),
    })}
  />

  <Hero title="Tailwind CSS Blog" subtitle="Tips, Tricks & Real-World Solutions">
    Learn practical Tailwind CSS techniques through tutorials and guides built from real-world
    experience. Discover best practices, performance tips, and clever solutions to common styling
    challenges.
  </Hero>

  <section class="mx-auto max-w-7xl px-4 pb-8">
    <ul class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
      {
        posts.map(({ emoji, slug, title, updatedDate }) => (
          <li>
            <a
              href={`/blog/${slug}`}
              class="flex h-full flex-col rounded-lg border border-stone-300 p-4 shadow-sm transition-colors hover:bg-stone-100 focus:ring-2 focus:ring-pink-500 focus:outline-0 sm:p-6"
            >
              <span aria-hidden="true" class="text-xl sm:text-2xl">
                {emoji}
              </span>

              <FormattedDate date={updatedDate} class="mt-4 text-sm text-stone-700" />

              <h2 class="mt-1 font-medium text-pretty text-stone-900 sm:text-lg">{title}</h2>
            </a>
          </li>
        ))
      }
    </ul>
  </section>
</BaseLayout>
